<template>
  <!-- 注意：点击对话框右上角的 x 会触发对话框的 @close 事件 -->
  <el-dialog title="分配角色" :visible="showDialog" width="50%" @open="onOpen" @close="onClose">
    <!-- 复选框组 -->
    <el-checkbox-group v-model="checkList" v-loading="isloading" size="mini">
      <!-- 复选框 -->
      <!-- 注意：默认情况下，label 既是看到的名字，又是选中后的值 -->
      <!-- 如果想要分开，需要在开始和结束标签中间，提供看到的名字，只把 label 当作选中后的值 -->
      <el-checkbox v-for="item in roleList" :key="item.id" border :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 按需导入接口
import { getRoleListAPI } from '@/api/role.js'
import { getEmpInfoAPI, assignRoleAPI } from '@/api/emp.js'

export default {
  name: 'AssignRole',
  props: {
    // 用来控制对话框的显示和隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    // 员工的 id
    // 后面可以根据员工的 id 查询员工所拥有的角色，进行数据的回显
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 所有的角色列表数据
      roleList: [],
      // 已选中的复选框的值，要存储到这个数组中
      checkList: [],
      // 是否正在加载数据
      isloading: false
    }
  },
  methods: {
    // 对话框打开的时候，获取所有的角色列表数据
    async onOpen() {
      this.isloading = true
      // Promise.all(数组)
      // 这个数组中，存储的是两个正在进行中的异步操作
      try {
        const arr = [getRoleListAPI({ page: 1, pagesize: 100 }), getEmpInfoAPI(this.id)]
        const [roleList, empInfo] = await Promise.all(arr)

        // 进行数据赋值
        this.roleList = roleList.data.rows
        this.checkList = empInfo.data.roleIds
      } finally {
        // 无论成功失败，都关闭 loading
        this.isloading = false
      }
    },
    onClose() {
      this.$emit('update:showDialog', false)
      this.$emit('update:id', '')
      // 每次对话框关闭，都清空勾选的角色数组
      this.checkList = []
    },
    async onConfirm() {
      await assignRoleAPI({ id: this.id, roleIds: this.checkList })
      this.$message.success('分配角色成功！')
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
  margin-bottom: 15px;
}
</style>
